<template>
  <div class="organize_active">
    <skelskeletonCom type="news" v-if="showSkeleton"></skelskeletonCom>
    <news-content v-else @load="loadData" :loading="loading" :finished="finished" :src="djywIconObj" :data="newsData"
                  :image-data="newsImage"></news-content>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { INewsCommonRes, INewsRes, INewsResquestParam } from '../importantNews/type';
import useGetPaginationData from '../importantNews/useGetData';
import { getNewsBigImage, getNewsList } from '@/api/importantNews';
import djywIconObj from '@/assets/img/zzsh_icon.png';
import newsContent from "@/components/newsContent/newsContent.vue";
import skelskeletonCom from '@/components/skeletonCom/skeletonCom.vue'
import { onMounted } from 'vue';
const params: INewsResquestParam = {
  token: '',
  page: 1,
  pageSize: 10,
  type: 'zzsh'
}
const newsImage = ref<Array<INewsRes & {
  newsImg: string
}>>([])
function getBigImage() {
  getNewsBigImage({
    ...params,
    pageSize: 5,
    type: params.type + '_big'
  }).then(res => {
    if (res.code == 200) {
      newsImage.value = res.data
    }
  })
}
onMounted(() => {
  getData(params)
  getBigImage()
})
const { newsData, getData, loading, finished, showSkeleton } = useGetPaginationData<INewsResquestParam, INewsCommonRes<INewsRes[]>, INewsRes>(getNewsList);
function loadData() {
  params.page++
  getData(params)
}
</script>

<style lang='less' scoped>
.organize_active {}
</style>